<template>
  <div class="container">
    <navigate>
      团体测评记录
      <template v-slot:right>
        <!-- <img class="search" src="@/assets/images/evaluate/search.png" alt="" /> -->
      </template>
    </navigate>
    <search-input
      class="search_input"
      type="text"
      v-model="value"
      placeholder="搜索咨询师姓名或咨询内容"
    ></search-input>
    <template v-for="(item, index) in list.combine">
      <div class="title flex_row flex_align_center" :key="index">
        <div class="bar"></div>
        <div class="date">{{ item.key }}</div>
      </div>
      <div
        class="card"
        v-for="(e, i) in item.value"
        @click="
          operateVisible = true;
          currentExport = e;
        "
        :key="`${i}-${index}-${e.id}`"
      >
        <div class="name_new flex_row flex_align_center between">
          <div class="name">{{ e.task_name }}</div>
          <!-- <div class="new" v-if="newPublish(e.create_time)">新</div> -->
        </div>
        <div class="info flex_row">
          <img :src="joinUrlImg(e.icon_url)" alt="" />
          <div class="info_main">
            <div class="task_name">{{ e.rating_scale_name }}</div>
            <div class="jurisdiction flex_row flex_align_center">
              <div class="text">查看权限：</div>

              <div class="user flex_row flex_align_center">
                <img
                  :src="
                    require(`@/assets/images/evaluate/radio${
                      e.read_auth.split(',').includes('3') == 1 ? 2 : 1
                    }.png`)
                  "
                  alt=""
                />用户本人
              </div>
              <div class="patriarch flex_row flex_align_center">
                <img
                  :src="
                    require(`@/assets/images/evaluate/radio${
                      e.read_auth.split(',').includes('4') ? 2 : 1
                    }.png`)
                  "
                  alt=""
                />用户家长
              </div>
            </div>
            <div class="exportTime">
              报告生成：{{ formatDate(e.create_time * 1000) }}
            </div>
            <div class="start_end_time flex_row between">
              <div class="start_end_time_left">
                <div class="text">任务起止时间：</div>
                <div class="start_time">
                  {{ formatDate(e.start_time * 1000) }}
                </div>
                <div class="end_time">{{ formatDate(e.end_time * 1000) }}</div>
              </div>
              <div class="start_end_time_right">
                <button
                  class="btn nowrap"
                  style="font-size: 15.28px"
                  @click="look(e)"
                >
                  查看报告
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="footer flex_row flex_align_center between">
          <div class="nowrap publish_person">
            发布人：{{ e.create_username }}
          </div>
          <div class="nowrap success">
            完成人数：{{
              e.participation_num_count + "/" + e.task_users_total_count
            }}
          </div>
        </div>
      </div>
    </template>
    <patriarch-login
      @confirm="look2"
      :visible="show"
      @close="show = $event"
      v-model="patriarchPassword"
    ></patriarch-login>
  </div>
</template>

<script>
import searchInput from "@/components/searchInput/index.vue";
import { mapState } from "vuex";
import { apiGetTeamEvaluateExport, getReportJurisdiction } from "@/api/report";
import { formatDate } from "@/utils/time";
import { debounce } from "@/utils/debounce";
import { apiVerifyParentPassword } from "@/api/user";
import patriarchLogin from "../components/index.vue";
import { joinUrlImg } from "@/utils/setUrlImg";
export default {
  components: {
    "search-input": searchInput,
    "patriarch-login": patriarchLogin,
  },
  computed: {
    ...mapState(["INFO"]),
    // 判断是否为新发布
    newPublish() {
      return (date) => {
        const time = new Date().getTime();
        const base = 1000 * 60 * 60 * 24;
        if (time - date * 1000 < base) return true;

        return false;
      };
    },
  },
  watch: {
    value(nv) {
      this._debounce();
    },
  },
  data() {
    return {
      // 家长密码
      patriarchPassword: "",
      show: false,
      _debounce: null,
      value: "",
      // 列表
      list: [],
      // 获取测评列表的参数
      params: {
        page: 1,
        page_size: 9998,
      },
      currentReport: "",
    };
  },
  methods: {
    joinUrlImg,
    // 查看报告
    async look2() {
      // 验证家长密码
      const { data } = await apiVerifyParentPassword({
        password: this.patriarchPassword,
      });
      if (data.code == 200) {
        // 验证密码正确
        this.$router.push(
          `/teamEvaluateExportDetail/${this.currentReport.report_id}/${this.currentReport.task_id}`
        );
      }
    },
    async look(item) {
      this.currentReport = item;
      const { data } = await getReportJurisdiction({
        id: item.report_id,
        type: 2,
      });
      if (data.code == 200) {
        this.$router.push(
          `/teamEvaluateExportDetail/${item.report_id}/${item.task_id}`
        );
      } else if (data.code == 402) {
        this.show = true;
      } else {
        this.$toast.fail("没有查看报告的权限！");
      }
    },
    // 搜索
    search() {
      this._debounce = debounce(() => {
        this.getTeamEvaluateExport();
      }, 500);
    },
    formatDate,
    mergedArray(arr) {
      let map = new Map();
      let temp = [];
      arr.forEach((item) => {
        let date = formatDate(
          new Date(item.create_time * 1000),
          "yyyy年MM年dd日"
        );
        map.has(date) ? map.get(date).push(item) : map.set(date, [item]);
      });
      Array.from({ length: [...map.keys()].length }, (item, index) => {
        temp.push({
          key: [...map.keys()][index],
          value: [...map.values()][index],
        });
      });
      return {
        key: [...map.keys()],
        value: [...map.values()],
        combine: temp,
      };
    },
    async getTeamEvaluateExport() {
      const params = {
        company_id: this.INFO.platform_unit_id,
        ...this.params,
        search_key: this.value,
      };
      const { data } = await apiGetTeamEvaluateExport(params);
      if (data.code == 200) {
        this.list = this.mergedArray(data.data.list);
      }
    },
  },
  created() {
    this.search();
    this.getTeamEvaluateExport();
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>
